<template>
  <a-drawer
    :title="submitFlag === 'save' ?'添加字典数据':'编辑字典数据'"
    :width="450"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    :closable="false"
    @close="onClose"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
          <a-form-item label="字典类型">
            <a-input
              :disabled="true"
              v-decorator="['dictType']"
            >
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="字典数据标签">
            <a-input
              v-decorator="['dictLabel',{rules: [{ required: true, message: '请输入字典数据标签', pattern: /^[^\s]*$/ }],},]"
              placeholder="请输入字典数据标签"
            >
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="字典数据键值">
            <a-input
              v-decorator="['dictValue',{rules: [{ required: true, message: '请输入字典数据键值', pattern: /^[^\s]*$/ }],},]"
              placeholder="请输入字典数据键值"
            >
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="字典数据排序号">
            <a-input-number
              :min="0"
              :max="100"
              v-decorator="['dictSort']"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <span slot="label">
              状态
              <a-tooltip placement="topLeft" title="启用/禁用">
                <a-icon type="question-circle" theme="twoTone"/>
              </a-tooltip>
            </span>
            <a-radio-group
              v-decorator="['status', {initialValue: 'true'}]">
              <a-radio value="true">
                启用
              </a-radio>
              <a-radio value="false">
                禁用
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="描述">
            <a-textarea
              v-decorator="['remark']"
              :rows="4"
              placeholder="在这里输入角色描述..."></a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-popconfirm title="真的放弃编辑吗?" @confirm="onClose">
        <a-button :style="{ marginRight: '8px' }">
          取消
        </a-button>
      </a-popconfirm>
      <a-button type="primary" @click="handleSubmit">
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { addDictData, editDictData } from '@/api/system'
import pick from 'lodash.pick'
export default {
  name: 'DictDataModal',
  components: {},
  data () {
    return {
      replaceFields: {
        children: 'children',
        title: 'name',
        value: 'id'
      },
      form: this.$form.createForm(this),
      visible: false,
      mdl: {},
      disabled: false,
      title: '添加字典数据',
      submitFlag: null
    }
  },
  methods: {
    add (dictType) {
      this.submitFlag = 'save'
      this.form.resetFields()
      this.visible = true
      this.mdl.dictType = dictType
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'dictType'))
      })
    },
    edit (record) {
      if (record.id > 0) {
        this.submitFlag = 'edit'
        this.mdl = Object.assign({}, record)
        this.mdl.status = record.status.toString()
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl, 'id', 'dictLabel', 'dictType', 'dictValue', 'dictSort', 'status', 'remark'))
        })
      }
    },
    onClose () {
      this.visible = false
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.submitFlag === 'save') {
            addDictData(values).then(res => {
              if (res.code === 0) {
                this.$message.success('保存字典数据成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          } else {
            editDictData(values).then(res => {
              if (res.code === 0) {
                this.$message.success('修改字典数据成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
